<!DOCTYPE html><html lang="en"><head><title>Document</title><style type="text/css">.mask-wrapper {    position: relative;    overflow: hidden;}.mask-inner {    position: absolute;    left: 0;    top: 100%;    width: 100%;    height: 100%;    -moz-transition: top ease 200ms;    -o-transition: top ease 200ms;    -webkit-transition: top ease 200ms;    transition: top ease 200ms;}.mask-wrapper:hover .mask-inner {    top: 0;}#my-mask {    width: 300px;    height: 200px;    background: red;}#my-mask .mask-inner {    background: rgba(0,0,0,.5);}</style></head><body><div id="my-mask" class="mask-wrapper">    <p>Lorem ipsum</p>    <div class="mask-inner">        <p>foo bar</p>    </div></div></body></html>